<template>
  <div>
    <!-- 导航部分开始 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>质量管理</el-breadcrumb-item>
      <el-breadcrumb-item>检测模板</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 导航部分结束 -->
    <!--  搜索栏开始 -->
    <el-form
      style="margin-top: 15px;"
      :inline="true"
      :model="queryTemplate"
      class="demo-form-inline"
    >
      <el-form-item label="检测模板编号">
        <el-input v-model="queryTemplate.templateCode" placeholder="检测模板编号" clearable />
      </el-form-item>
      <el-form-item label="检测模板名称">
        <el-input v-model="queryTemplate.templateName" placeholder="检测模板名称" clearable />
      </el-form-item>
      <!--  <el-form-item label="产品编码">
        <el-input v-model="itemCode" placeholder="产品编码" clearable />
      </el-form-item>
      <el-form-item label="产品名称">
        <el-input v-model="itemName" placeholder="产品名称" clearable />
      </el-form-item>-->
      <el-form-item label="检测种类">
        <el-checkbox-group v-model="queryTemplate.qcTypes">
          <el-checkbox label="[来料检验]" :value="0" />
          <el-checkbox label="[过程检验]" :value="1" />
          <el-checkbox label="[首检]" :value="2" />
          <el-checkbox label="[末检]" :value="3" />
          <el-checkbox label="[成品检验]" :value="4" />
          <el-checkbox label="[巡检]" :value="5" />
          <el-checkbox label="[发货检验]" :value="6" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadTemplates">搜索</el-button>
      </el-form-item>
    </el-form>
    <!--  搜索栏结束 -->
    <!-- 工具栏开始 -->
    <div class="flex">
      <el-button title="新增检测模板" @click="this.addTemplateDialogVisible = true" type="primary">
        <el-icon>
          <Plus />
        </el-icon>
      </el-button>
      <el-button @click="handlerEditTemplates" title="编辑选中检测模板" type="primary">
        <el-icon>
          <EditPen />
        </el-icon>
      </el-button>
      <el-button @click="handlerDeleteTemplates" title="删除选中检测模板" type="primary">
        <el-icon>
          <Delete />
        </el-icon>
      </el-button>
    </div>
    <!-- 工具栏结束 -->
    <!-- 表格 开始 -->
    <el-table
      ref="templateTable"
      :data="templates"
      max-height="800px"
      stripe="true"
      border="true"
      style="width: 90%;margin-top: 10px;"
    >
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column align="center" label="检测模板编号" property="templateCode" />
      <el-table-column align="center" label="检测模板名称" property="templateName" />
      <el-table-column align="center" label="检测模板种类" property="qcTypes" />
      <el-table-column align="center" label="是否启用" property="enableFlag">
        <template #default="scope">
          <!-- scope.row 就是整行数据-->
          <el-tag v-if="scope.row.enableFlag =='Y'" class="ml-2" type="success">是</el-tag>
          <el-tag v-else class="ml-2" type="danger">否</el-tag>
        </template>
      </el-table-column>

      <el-table-column width="150" align="center" label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
          <el-popconfirm
            confirm-button-text="是"
            cancel-button-text="点错了"
            @confirm="handlerDelete(scope.row)"
            title="您是否要删除这行数据"
          >
            <template #reference>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 结束 -->
    <!-- 分页栏开始 -->
    <el-pagination
      style="margin-top: 15px;"
      :page-size="templateLimit"
      :pager-count="templateMaxPage"
      @current-change="changePage"
      background
      layout="prev, pager, next"
      :total="templateTotal"
    />
    <!-- 分页栏结束 -->

    <!-- 添加字典的弹窗窗体开始-->
    <el-dialog v-model="addTemplateDialogVisible" title="添加检测模板" width="600" align-center>
      <!-- 添加用户的表单 -->
      <el-form label-width="100px" :model="newTemplate" style="max-width: 460px">
        <el-form-item label="检测模板编号">
          <el-input v-model="newTemplate.templateCode" />
          <el-switch
            @change="autoGenerateTemplateCode"
            v-model="autoTemplateCode"
            class="ml-2"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          />
        </el-form-item>
        <el-form-item label="检测模板名称">
          <el-input v-model="newTemplate.templateName" />
        </el-form-item>
        <el-form-item label="检测种类">
          <el-checkbox-group v-model="newTemplate.qcTypes">
            <el-checkbox label="[来料检验]" :value="0" />
            <el-checkbox label="[过程检验]" :value="1" />
            <el-checkbox label="[首检]" :value="2" />
            <el-checkbox label="[末检]" :value="3" />
            <el-checkbox label="[成品检验]" :value="4" />
            <el-checkbox label="[巡检]" :value="5" />
            <el-checkbox label="[发货检验]" :value="6" />
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="是否启用">
          <el-radio-group v-model="newTemplate.enableFlag">
            <el-radio label="Y" :value="0" />
            <el-radio label="N" :value="1" />
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelAddTemplate">取消</el-button>
          <el-button type="primary" @click="doAddTemplate">提交</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 添加用户的弹窗窗体结束-->

    <!-- 编辑弹窗窗体开始-->
    <el-dialog v-model="TemplateEditDrawer" title="修改检测模板" width="800" align-center>
      <!-- 添加用户的表单 -->
      <el-form label-width="100px" :model="editTemplate" style="max-width: 460px">
        <el-form-item label="检测模板编号">
          <el-input v-model="editTemplate.templateCode" />
          <el-switch
            @change="editGenerateTemplateCode"
            v-model="editTemplateCode"
            class="ml-2"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          />
        </el-form-item>
        <el-form-item label="检测模板名称">
          <el-input v-model="editTemplate.templateName" />
        </el-form-item>
        <el-form-item label="检测种类">
          <el-checkbox-group v-model="editTemplate.qcTypes">
            <el-checkbox label="[来料检验]" :value="0" />
            <el-checkbox label="[过程检验]" :value="1" />
            <el-checkbox label="[首检]" :value="2" />
            <el-checkbox label="[末检]" :value="3" />
            <el-checkbox label="[成品检验]" :value="4" />
            <el-checkbox label="[巡检]" :value="5" />
            <el-checkbox label="[发货检验]" :value="6" />
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="是否启用">
          <el-radio-group v-model="editTemplate.enableFlag">
            <el-radio label="Y" :value="0" />
            <el-radio label="N" :value="1" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="editTemplate.remark" />
        </el-form-item>
      </el-form>
      <!--嵌套=======================================================================================   -->
      <el-tabs type="border-card">
        <!--检测项======================================================================================   -->
        <el-tab-pane label="检测项">
          <div style="margin:50px">
            <!-- 导航部分开始 -->

            <!-- 导航部分结束 -->

            <!-- 工具栏开始 -->
            <div class="flex">
              <el-button
                title="新增"
                @click="this.addTemplateIndexDialogVisible = true"
                type="primary"
              >
                <el-icon>
                  <Plus />
                </el-icon>
              </el-button>

              <el-button @click="handlerDeleteTemplateIndexs" title="删除" type="primary">
                <el-icon>
                  <Delete />
                </el-icon>
              </el-button>
            </div>
            <!-- 工具栏结束 -->
            <!-- 表格 开始 -->
            <el-table
              ref="TemplateIndexTable"
              :data="TemplateIndexs"
              max-height="800px"
              stripe="true"
              border="true"
              style="width: 90%;margin-top: 10px;"
            >
              <el-table-column align="center" type="selection" width="55" />
              <el-table-column align="center" label="检测项ID" property="indexId" />
              <el-table-column align="center" label="检测项编码" property="indexCode" />
              <el-table-column align="center" label="检测项名称" property="indexName" />
              <el-table-column align="center" label="检测项类型" property="indexType">
                <template #default="scope">
                  <el-link>{{ scope.row.indexType }}</el-link>
                </template>
              </el-table-column>
              <el-table-column align="center" label="检测工具" property="qcTool" />
              <el-table-column align="center" label="检测方法" property="checkMethod" />
              <el-table-column align="center" label="标准值" property="standerVal" />
              <el-table-column align="center" label="单位" property="unitOfMeasure" />
              <el-table-column align="center" label="误差上限" property="thresholdMax" />
              <el-table-column align="center" label="误差下限" property="thresholdMin" />
              <el-table-column width="150" align="center" label="操作">
                <template #default="scope">
                  <el-button size="small" @click="handleEditTemplateIndex(scope.row)">修改</el-button>
                  <el-popconfirm
                    confirm-button-text="是"
                    cancel-button-text="点错了"
                    @confirm="handleDeleteTemplateIndex(scope.row)"
                    title="您是否要删除这行数据"
                  >
                    <template #reference>
                      <el-button size="small" type="danger">删除</el-button>
                    </template>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
            <!-- 表格 结束 -->
            <!-- 分页栏开始 -->
            <el-pagination
              style="margin-top: 15px;"
              :page-size="templateIndexLimit"
              :pager-count="templateIndexMaxPage"
              @current-change="changePage2"
              background
              layout="prev, pager, next"
              :total="templateIndexTotal"
            />
            <!-- 分页栏结束 -->
          </div>
        </el-tab-pane>
        <!--检测项结束===========================================================================================   -->
        <!--产品物料======================================================================================   -->
        <el-tab-pane label="产品物料">
          <div style="margin:50px">
            <!-- 导航部分开始 -->

            <!-- 导航部分结束 -->

            <!-- 工具栏开始 -->
            <div class="flex">
              <el-button
                title="新增"
                @click="this.addTemplateProductDialogVisible = true"
                type="primary"
              >
                <el-icon>
                  <Plus />
                </el-icon>
              </el-button>

              <el-button @click="handlerDeleteTemplateProducts" title="删除" type="primary">
                <el-icon>
                  <Delete />
                </el-icon>
              </el-button>
            </div>
            <!-- 工具栏结束 -->
            <!-- 表格 开始 -->
            <el-table
              ref="TemplateProductTable"
              :data="TemplateProducts"
              max-height="800px"
              stripe="true"
              border="true"
              style="width: 90%;margin-top: 10px;"
            >
              <el-table-column align="center" type="selection" width="55" />
              <el-table-column align="center" label="产品物料编码" property="itemCode" />
              <el-table-column align="center" label="产品物料名称" property="itemName" />
              <el-table-column align="center" label="规格型号" property="specification" />
              <el-table-column align="center" label="最低检测数" property="unitOfMeasure" />
              <el-table-column align="center" label="单位" property="quantityCheck" />
              <el-table-column align="center" label="最大不合格数" property="quantityUnqualified" />
              <el-table-column align="center" label="最大致命缺陷率" property="crRate" />
              <el-table-column align="center" label="最大严重缺陷率" property="majRate" />
              <el-table-column align="center" label="最大轻微缺陷率" property="minRate" />
              <el-table-column width="150" align="center" label="操作">
                <template #default="scope">
                  <el-button size="small" @click="handleEditTemplateProduct(scope.row)">修改</el-button>
                  <el-popconfirm
                    confirm-button-text="是"
                    cancel-button-text="点错了"
                    @confirm="handleDeleteTemplateProduct(scope.row)"
                    title="您是否要删除这行数据"
                  >
                    <template #reference>
                      <el-button size="small" type="danger">删除</el-button>
                    </template>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
            <!-- 表格 结束 -->
            <!-- 分页栏开始 -->
            <el-pagination
              style="margin-top: 15px;"
              :page-size="templateProductLimit"
              :pager-count="templateProductMaxPage"
              @current-change="changePage3"
              background
              layout="prev, pager, next"
              :total="templateProductTotal"
            />
            <!-- 分页栏结束 -->
          </div>
        </el-tab-pane>

        <!--产品物料结束=======================================================================-->
      </el-tabs>
      <!--嵌套结束=======================================================================-->

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelEditTemplate">取消</el-button>
          <el-button type="primary" @click="doEditTemplate">提交</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑的弹窗窗体结束-->
    <!--嵌套检测项=======================================================================================   -->
    <!-- 添加检测项的弹窗窗体开始-->
    <el-dialog v-model="addTemplateIndexDialogVisible" title="添加检测项" width="600" align-center>
      <!-- 添加检测项的表单 -->
      <el-form label-width="100px" :model="newTemplateIndex" style="max-width: 460px">
        <el-form-item label="检测模板ID">
          <el-input v-model="newTemplateIndex.templateId" />
        </el-form-item>
        <el-form-item label="检测项ID">
          <el-input v-model="newTemplateIndex.indexId" />
        </el-form-item>
        <el-form-item label="检测模板编号">
          <el-input v-model="newTemplateIndex.indexCode" />
        </el-form-item>

        <el-form-item label="检测模板名称">
          <el-input v-model="newTemplateIndex.indexName" />
        </el-form-item>
        <el-form-item label="检测类型">
          <el-select v-model="newTemplateIndex.indexType" placeholder="检测项类型">
            <el-option label="尺寸" value="尺寸" />
            <el-option label="外观" value="外观" />
            <el-option label="重量" value="重量" />
            <el-option label="性能" value="性能" />
            <el-option label="成分" value="成分" />
          </el-select>
        </el-form-item>
        <el-form-item label="检测工具">
          <el-input v-model="newTemplateIndex.qcTool" />
        </el-form-item>

        <el-form-item label="检测要求">
          <el-input v-model="newTemplateIndex.checkMethod" />
        </el-form-item>
        <el-form-item label="标准值">
          <el-input v-model="newTemplateIndex.standerVal" />
        </el-form-item>

        <el-form-item label="单位">
          <el-select v-model="newTemplateIndex.unitOfMeasure" placeholder="单位">
            <el-option label="米" value="米" />
            <el-option label="厘米" value="厘米" />
            <el-option label="毫米" value="毫米" />
            <el-option label="瓶" value="瓶" />
            <el-option label="箱" value="箱" />
            <el-option label="测试人员" value="测试人员" />
            <el-option label="公支" value="公支" />
            <el-option label="英支" value="英支" />
            <el-option label="捆" value="捆" />
            <el-option label="台" value="台" />
            <el-option label="克" value="克" />
          </el-select>
        </el-form-item>

        <el-form-item label="误差上限">
          <el-input-number v-model="newTemplateIndex.thresholdMax" :min="1.0" :max="100.0" />
        </el-form-item>
        <el-form-item label="误差下限">
          <el-input-number v-model="newTemplateIndex.thresholdMin" :min="-200.0" :max="0.0" />
        </el-form-item>
        <el-form-item label="说明图">
          <el-input v-model="newTemplateIndex.docUrl" />
        </el-form-item>

        <el-form-item label="备注">
          <el-input v-model="newTemplateIndex.remark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelAddTemplateIndex">取消</el-button>
          <el-button type="primary" @click="doAddTemplateIndex">提交</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 添加检测项的弹窗窗体结束-->
    <!-- 编辑检测项的弹窗窗体开始-->
    <el-dialog v-model="templateIndexEdit" title="添加检测项" width="600" align-center>
      <!-- 添加检测项的表单 -->
      <el-form label-width="100px" :model="editTemplateIndex" style="max-width: 460px">
        <el-form-item label="检测项ID">
          <el-input v-model="editTemplateIndex.indexId" />
        </el-form-item>
        <el-form-item label="检测模板编号">
          <el-input v-model="editTemplateIndex.indexCode" />
        </el-form-item>

        <el-form-item label="检测模板名称">
          <el-input v-model="editTemplateIndex.indexName" />
        </el-form-item>
        <el-form-item label="检测类型">
          <el-select v-model="editTemplateIndex.indexType" placeholder="检测项类型">
            <el-option label="尺寸" value="尺寸" />
            <el-option label="外观" value="外观" />
            <el-option label="重量" value="重量" />
            <el-option label="性能" value="性能" />
            <el-option label="成分" value="成分" />
          </el-select>
        </el-form-item>
        <el-form-item label="检测工具">
          <el-input v-model="editTemplateIndex.qcTool" />
        </el-form-item>

        <el-form-item label="检测要求">
          <el-input v-model="editTemplateIndex.checkMethod" />
        </el-form-item>
        <el-form-item label="标准值">
          <el-input v-model="editTemplateIndex.standerVal" />
        </el-form-item>

        <el-form-item label="单位">
          <el-select v-model="editTemplateIndex.unitOfMeasure" placeholder="单位">
            <el-option label="米" value="米" />
            <el-option label="厘米" value="厘米" />
            <el-option label="毫米" value="毫米" />
            <el-option label="瓶" value="瓶" />
            <el-option label="箱" value="箱" />
            <el-option label="测试人员" value="测试人员" />
            <el-option label="公支" value="公支" />
            <el-option label="英支" value="英支" />
            <el-option label="捆" value="捆" />
            <el-option label="台" value="台" />
            <el-option label="克" value="克" />
          </el-select>
        </el-form-item>

        <el-form-item label="误差上限">
          <el-input-number v-model="editTemplateIndex.thresholdMax" :min="1.0" :max="100.0" />
        </el-form-item>
        <el-form-item label="误差下限">
          <el-input-number v-model="editTemplateIndex.thresholdMin" :min="-200.0" :max="0.0" />
        </el-form-item>
        <el-form-item label="说明图">
          <el-input v-model="editTemplateIndex.docUrl" />
        </el-form-item>

        <el-form-item label="备注">
          <el-input v-model="editTemplateIndex.remark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelEditTemplateIndex">取消</el-button>
          <el-button type="primary" @click="EditTemplateIndex">提交</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑检测项的弹窗窗体结束-->
    <!--嵌套结束=======================================================================-->
    <!--======================================================================-->
    <!--=======================================================================-->
    <!--=======================================================================-->
    <!--嵌套产品=======================================================================================   -->
    <!-- 添加产品的弹窗窗体开始-->
    <el-dialog v-model="addTemplateProductDialogVisible" title="添加检测项" width="600" align-center>
      <!-- 添加产品的表单 -->
      <el-form label-width="100px" :model="newTemplateProduct" style="max-width: 460px">
        <el-form-item label="检测模板ID">
          <el-input v-model="newTemplateProduct.templateId" />
        </el-form-item>
        <el-form-item label="产品物料ID">
          <el-input v-model="newTemplateProduct.itemId" />
        </el-form-item>
        <el-form-item label="产品物料编码">
          <el-input v-model="newTemplateProduct.itemCode" />
        </el-form-item>

        <el-form-item label="产品物料名称">
          <el-input v-model="newTemplateProduct.itemName" />
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input v-model="newTemplateProduct.specification" />
        </el-form-item>

        <el-form-item label="最低检测数">
          <el-input-number v-model="newTemplateProduct.unitOfMeasure" :min="1" :max="100" />
        </el-form-item>
        <el-form-item label="最大不合格数">
          <el-input-number v-model="newTemplateProduct.quantityCheck" :min="0" :max="100" />
        </el-form-item>

        <el-form-item label="单位">
          <el-input v-model="newTemplateProduct.unitOfMeasure" />
        </el-form-item>

        <el-form-item label="最大致命缺陷率">
          <el-input-number
            v-model="newTemplateProduct.crRate"
            :precision="2"
            :step="1.0"
            :min="1"
            :max="100"
          />
        </el-form-item>
        <el-form-item label="最大严重缺陷率">
          <el-input-number
            v-model="newTemplateProduct.majRate"
            :precision="2"
            :step="1.0"
            :min="1"
            :max="100"
          />
        </el-form-item>

        <el-form-item label="最大轻微缺陷率">
          <el-input-number
            v-model="newTemplateProduct.minRate"
            :precision="2"
            :step="1.0"
            :min="1"
            :max="100"
          />
        </el-form-item>

        <el-form-item label="备注">
          <el-input v-model="newTemplateProduct.remark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelAddTemplateProduct">取消</el-button>
          <el-button type="primary" @click="doAddTemplateProduct">提交</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 添加产品的弹窗窗体结束-->
    <!-- 编辑产品的弹窗窗体开始-->
    <el-dialog v-model="templateProductEdit" title="添加检测项" width="600" align-center>
      <!-- 编辑产品的表单 -->
      <el-form label-width="100px" :model="editTemplateProduct" style="max-width: 460px">
        <el-form-item label="检测模板ID">
          <el-input v-model="editTemplateProduct.templateId" />
        </el-form-item>
        <el-form-item label="产品物料ID">
          <el-input v-model="editTemplateProduct.itemId" />
        </el-form-item>
        <el-form-item label="产品物料编码">
          <el-input v-model="editTemplateProduct.itemCode" />
        </el-form-item>

        <el-form-item label="产品物料名称">
          <el-input v-model="editTemplateProduct.itemName" />
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input v-model="editTemplateProduct.specification" />
        </el-form-item>

        <el-form-item label="最低检测数">
          <el-input-number v-model="editTemplateProduct.unitOfMeasure" :min="1" :max="100" />
        </el-form-item>
        <el-form-item label="最大不合格数">
          <el-input-number v-model="editTemplateProduct.quantityCheck" :min="0" :max="100" />
        </el-form-item>

        <el-form-item label="单位">
          <el-input v-model="editTemplateProduct.unitOfMeasure" />
        </el-form-item>

        <el-form-item label="最大致命缺陷率">
          <el-input-number v-model="editTemplateProduct.crRate" :min="1.0" :max="100.0" />
        </el-form-item>
        <el-form-item label="最大严重缺陷率">
          <el-input-number v-model="editTemplateProduct.majRate" :min="1.0" :max="100.0" />
        </el-form-item>

        <el-form-item label="最大轻微缺陷率">
          <el-input-number v-model="editTemplateProduct.minRate" :min="1.0" :max="100.0" />
        </el-form-item>

        <el-form-item label="备注">
          <el-input v-model="editTemplateProduct.remark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelEditTemplateProduct">取消</el-button>
          <el-button type="primary" @click="EditTemplateProduct">提交</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑编辑的弹窗窗体结束-->
    <!--嵌套结束=======================================================================-->
  </div>
</template>
  <script>
import templateRequest from "../../../api/template-api.js";
import templateIndexRequest from "../../../api/template-index-api.js";
import templateProductRequest from "../../../api/template-product-api.js";
import tools from "../../../util/tools.js";

export default {
  data() {
    return {
      itemName: null,
      itemCode: null,
      queryTemplate: {}, // 分装查询字典条件的字典对象
      templates: [], // 字典数据列表
      templateCurrPage: 1, // 字典分页的当前页码
      templateLimit: 5, // 字典分页的每页大小
      templateTotal: 0, // 字典列表的总条数
      templateMaxPage: 1, // 字典列表的最大页码 // 新增字典相关属性

      addTemplateDialogVisible: false, // 新增字典的弹窗标志
      newTemplate: {}, // 封装新增的字典信息

      autoTemplateCode: false, //新增自动生成的开关绑定
      newTemplate: {
        templateCode: undefined
      },
      TemplateEditDrawer: false, //编辑的弹窗
      editTemplate: {}, //保存编辑的信息
      editTemplateCode: false, //编辑自动生成的开关绑定

      currTemplate: {}, // 保存正在操作的字典信息

      //嵌入,检测项的新增开关绑定
      addTemplateIndexDialogVisible: false,
      TemplateIndexs: [], // 检测项数据列表
      templateIndexCurrPage: 1, // 检测项分页的当前页码
      templateIndexLimit: 5, // 检测项分页的每页大小
      templateIndexTotal: 0, //  检测项列表的总条数
      templateIndexMaxPage: 1, // 检测项列表的最大页码
      templateIndex1: null,
      newTemplateIndex: {}, //封装新增的检测项信息
      templateIndexEdit: false, //检测项的编辑开关绑定
      editTemplateIndex: {}, //封装编辑的检测项信息

      //嵌入,物料产品的新增开关绑定
      addTemplateProductDialogVisible: false,
      TemplateProducts: [], // 物料产品数据列表
      templateProductCurrPage: 1, // 物料产品分页的当前页码
      templateProductLimit: 5, // 物料产品分页的每页大小
      templateProductTotal: 0, //物料产品列表的总条数 检测项列表的总条数
      templateProductMaxPage: 1, //物料产品列表的最大页码 检测项列表的最大页码
      templateProduct1: null,
      newTemplateProduct: {}, //封装新增的物料产品信息
      templateProductEdit: false, //检测项的编辑开关绑定
      editTemplateProduct: {} //封装编辑的检测项信息
    };
  },
  methods: {
    /**
     * 删除操作
     */

    handleDeleteTemplateProduct(row) {
      templateProductRequest.delete(row.itemCode, res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this.loadTemplateProducts(); //更新页面
        } else {
          this.$message({
            type: "error",
            message: "删除失败"
          });
        }
      });
    },
    /**
     * 取消编辑操作
     */
    cancelEditTemplateProduct() {
      // 关闭窗体
      this.templateProductEdit = false;
      // 清空editTemplateIndex
      this.editTemplateProduct = {};
    },
    /**
     *
     *修改 嵌入检测模板的提交按钮事件
     */
    EditTemplateProduct() {
      // 数据校验：略
      // 提交数据
      console.log(this.editTemplateProduct);
      templateProductRequest.update(this.editTemplateProduct, res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "保存成功"
          });
          // 关闭窗体
          this.templateProductEdit = false;
          // 重新加载数据
          this.loadTemplateProducts(); // 加载当前页
          this.editTemplateProduct = {}; //制空
        } else if (res.code == 300) {
          this.$message({
            type: "warning",
            message: "编号重复"
          });
        } else {
          this.$message({
            type: "error",
            message: "保存失败"
          });
        }
      });
    },

    /**
     *修改 嵌入检测模板的按钮事件
     */
    handleEditTemplateProduct(row) {
      templateProductRequest.getEdit(row.itemCode, res => {
        //将查询的缺陷信息设置到editDefect中
        this.editTemplateProduct = res.data;
        console.log(this.editTemplateProduct);
        //显示抽屉弹窗
        this.templateProductEdit = true;
      });
    },
    /**
     *新增 嵌入产品的提交按钮事件
     */
    doAddTemplateProduct() {
      // 数据校验：略
      // 提交数据
      console.log(this.newTemplateProduct);
      templateProductRequest.save(this.newTemplateProduct, res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "保存成功"
          });
          // 关闭窗体
          this.cancelAddTemplateProduct();
          // 重新加载数据
          this.loadTemplateProducts(); // 加载当前页
        } else if (res.code == 300) {
          this.$message({
            type: "warning",
            message: "编号重复"
          });
        } else {
          this.$message({
            type: "error",
            message: "保存失败"
          });
        }
      });
    },

    /**
     * 取消新增操作
     */
    cancelAddTemplateProduct() {
      // 关闭窗体
      this.addTemplateProductDialogVisible = false;
      // 清空newTemplateIndex
      this.newTemplateProduct = {};
    },

    /** ========================================================================================================= */
    /**
     * 删除操作
     */

    handleDeleteTemplateIndex(row) {
      templateIndexRequest.delete(row.indexId, res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this.loadTemplateIndexs(); //更新页面
        } else {
          this.$message({
            type: "error",
            message: "删除失败"
          });
        }
      });
    },
    /**
     * 取消编辑操作
     */
    cancelEditTemplateIndex() {
      // 关闭窗体
      this.templateIndexEdit = false;
      // 清空editTemplateIndex
      this.editTemplateIndex = {};
    },
    /**
     *
     *修改 嵌入检测模板的提交按钮事件
     */
    EditTemplateIndex() {
      // 数据校验：略
      // 提交数据
      console.log(this.editTemplateIndex);
      templateIndexRequest.update(this.editTemplateIndex, res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "保存成功"
          });
          // 关闭窗体
          this.templateIndexEdit = false;
          // 重新加载数据
          this.loadTemplateIndexs(); // 加载当前页
          this.editTemplateIndex = {}; //制空
        } else if (res.code == 300) {
          this.$message({
            type: "warning",
            message: "编号重复"
          });
        } else {
          this.$message({
            type: "error",
            message: "保存失败"
          });
        }
      });
    },

    /**
     *修改 嵌入检测模板的按钮事件
     */
    handleEditTemplateIndex(row) {
      templateIndexRequest.getEdit(row.indexCode, res => {
        //将查询的缺陷信息设置到editDefect中
        this.editTemplateIndex = res.data;
        console.log(this.editTemplateIndex);
        //显示抽屉弹窗
        this.templateIndexEdit = true;
      });
    },
    /**
     *新增 嵌入检测模板的提交按钮事件
     */
    doAddTemplateIndex() {
      // 数据校验：略
      // 提交数据
      console.log(this.newTemplateIndex);
      templateIndexRequest.save(this.newTemplateIndex, res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "保存成功"
          });
          // 关闭窗体
          this.cancelAddTemplateIndex();
          // 重新加载数据
          this.loadTemplateIndexs(); // 加载当前页
        } else if (res.code == 300) {
          this.$message({
            type: "warning",
            message: "编号重复"
          });
        } else {
          this.$message({
            type: "error",
            message: "保存失败"
          });
        }
      });
    },

    /**
     * 取消新增操作
     */
    cancelAddTemplateIndex() {
      // 关闭窗体
      this.addTemplateIndexDialogVisible = false;
      // 清空newTemplateIndex
      this.newTemplateIndex = {};
    },
    /**
     *新增 自动生成编号的提交按钮事件
     */
    autoGenerateTemplateCode(val) {
      if (val) {
        templateRequest.generateTemplateCode(res => {
          this.newTemplate.templateCode = res.data;
        });
      }
    },
    /**
     *编辑 自动生成编号的提交按钮事件
     */
    editGenerateTemplateCode(val) {
      if (val) {
        templateRequest.generateTemplateCode(res => {
          this.editTemplate.templateCode = res.data;
        });
      }
    },
    /**
     * 新增字典的提交按钮事件
     */ doAddTemplate() {
      console.log(this.newTemplate);
      console.log(this.newTemplate.qcTypes);
      console.log(this.newTemplate.qcTypes.join(" "));
      this.newTemplate.qcTypes = this.newTemplate.qcTypes.join(" "); //前端字符数组变成字符串 // 数据校验：略 // 提交数据
      templateRequest.save(this.newTemplate, res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "保存成功"
          }); // 关闭窗体
          this.cancelAddTemplate(); // 重新加载数据
          this.loadTemplates(); // 加载当前页
        } else if (res.code == 300) {
          this.$message({
            type: "warning",
            message: res.msg
          });
        } else {
          this.$message({
            type: "error",
            message: "保存失败"
          });
        }
      });
    },
    /**
     * 取消新增字典的按钮事件
     */ cancelAddTemplate() {
      // 关闭窗体
      this.addTemplateDialogVisible = false; // 清空newDict
      this.newTemplate = {};
    },
    /**
     * 行删除事件
     * @param {} row
     */ handlerDelete(row) {
      templateRequest.delete(row.templateCode, res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this.loadTemplates(); //更新页面
        } else {
          this.$message({
            type: "error",
            message: "删除失败"
          });
        }
      });
    },

    /**
     * 行编辑事件
     * @param {*} row
     */ handleEdit(row) {
      this.templateIndex1 = row.templateCode;
      this.templateProduct1 = row.templateCode;
      templateRequest.get(row.templateCode, res => {
        this.editTemplate = res.data;
        this.TemplateEditDrawer = true;
        this.loadTemplateIndexs();
        this.loadTemplateProducts();
      });
    },
    /**
     * 取消编辑按钮事件
     */ cancelEditTemplate() {
      // 关闭窗体
      this.TemplateEditDrawer = false; // 清空newDict
      this.editTemplate = {};
    },
    /**
     * 编辑检测项的提交按钮事件
     */
    doEditTemplate() {
      templateRequest.update(this.editTemplate, res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "编辑成功"
          });
          // 关闭窗体
          this.TemplateEditDrawer = false;
          // 重新加载数据
          this.loadTemplates(); // 加载当前页
          this.editTemplate = {}; //制空
        } else if (res.code == 300) {
          this.$message({
            type: "warning",
            message: "编号重复"
          });
        } else {
          this.$message({
            type: "error",
            message: "编辑失败"
          });
        }
      });
    },
    /**
     * 时间毫秒数转换为对应的字符串
     * @param {*} time
     */ timeFormatter(row, column, time) {
      return tools.timeMillisToString(time);
    },
    /**
     * 工具栏-选中删除按钮事件
     */ handlerDeleteDicts() {},
    /**
     * 工具栏-选中编辑按钮事件
     */ handlerEditDicts() {},
    /**
     * 字典列表的翻页函数
     * @param {} value  最新页码
     */ changePage(value) {
      this.templateCurrPage = value;
      this.loadTemplates();
    },
    /**
     * 加载字典数据
     */ loadTemplates() {
      templateRequest.list(
        this.templateCurrPage,
        this.templateLimit,
        this.queryTemplate,
        res => {
          // 设置数据
          this.templates = res.data.list;
          this.templateTotal = res.data.total;
          this.templateMaxPage = res.data.pages;
        }
      );
    },
    /**
     * 字典列表的翻页函数
     * @param {} value  最新页码
     */ changePage2(value) {
      this.templateIndexCurrPage = value;
      this.loadTemplateIndexs();
    },
    /**
     * 加载检测项数据
     */ loadTemplateIndexs() {
      console.log(
        "==================================================================="
      );

      console.log(this.templateIndex1);
      templateIndexRequest.list(
        this.templateIndexCurrPage,
        this.templateIndexLimit,
        this.templateIndex1,
        res => {
          // 设置数据
          this.TemplateIndexs = res.data.list;
          this.templateIndexTotal = res.data.total;
          this.templateIndexMaxPage = res.data.pages;
        }
      );
    },

    /**
     * 物料产品列表的翻页函数
     * @param {} value  最新页码
     */ changePage3(value) {
      this.templateProductCurrPage = value;
      this.loadTemplateProducts();
    },
    /**
     * 加载物料产品数据
     */ loadTemplateProducts() {
      console.log(
        "==================================================================="
      );

      console.log(this.templateProduct1);
      templateProductRequest.list(
        this.templateProductCurrPage,
        this.templateProductLimit,
        this.templateProduct1,
        res => {
          // 设置数据
          this.TemplateProducts = res.data.list;
          this.templateProductTotal = res.data.total;
          this.templateProductMaxPage = res.data.pages;
        }
      );
    }
  },
  mounted() {
    // 默认加载字典数据列表

    this.loadTemplates();
  }
};
</script>
  
  